<template>
  <div class="main">
    
      <div class="lbt">
      <el-carousel  class="lbtry">
        <el-carousel-item v-for="(item, index) in carouselImages" :key="index" class="lbt-c1">
          <img :src="item" class="carousel-image" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="lbt">
      <el-carousel  class="lbtry">
        <el-carousel-item v-for="(item, index) in carouselImages" :key="index" class="lbt-c1">
          <img :src="item" class="carousel-image" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="lbt">
      <el-carousel  class="lbtry">
        <el-carousel-item v-for="(item, index) in carouselImages" :key="index" class="lbt-c1">
          <img :src="item" class="carousel-image" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="lbt">
      <el-carousel  class="lbtry">
        <el-carousel-item v-for="(item, index) in carouselImages" :key="index" class="lbt-c1">
          <img :src="item" class="carousel-image" />
        </el-carousel-item>
      </el-carousel>
    </div>
    
  </div>
</template>

<script setup>
import { ref } from 'vue';
import image1 from '@/assets/主页轮播图01.jpg';
import image2 from '@/assets/主页轮播图02.png';
import image3 from '@/assets/主页轮播图03.jpg';

const carouselImages = ref([image1, image2, image3]);
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
}
.lbt {
  height: 350px;
}
.lbtry {
  height: 380px;
}
.lbt-c1 {
  height: 380px;
}
.carousel-image {
  width: 100%;
  height: 100%;
}

</style>
